<template>
  <Card>
    <div slot="title" align="center">
      <Button type="text" size="small" @click="backClick" style="float: left">
        <Icon type="ios-arrow-back" style="margin-right: 5px"></Icon>
        返回
      </Button>

      <h4>创建新主题</h4>
    </div>

    <div class="body">
      <Form :model="form" ref="form" :rules="ruleValidate">
        <FormItem label="标题" prop="title">
          <Input v-model="form.title" type="text" placeholder="输入标题"/>
        </FormItem>

        <FormItem label="描述" prop="detail">
          <Input v-model="form.detail" type="textarea" placeholder="输入描述"/>
        </FormItem>

        <FormItem label="主图">
          <br/>
          <img class="mainPic" :src="form.imgSrc"/>
          <my-upload @onSuccess="uploadSuccess"></my-upload>
        </FormItem>


        <FormItem label="已选择的文章">
          <br/>
          <div>
            <Tag @on-close="removeList(index)" v-for="(item,index) of articleList" :key="item.id" type="dot" closable
                 color="#EF6AFF" checkable>{{item.title}}
            </Tag>
          </div>
        </FormItem>


        <FormItem>
          <Button type="ghost" @click="modal = true">
            <Icon type="ios-plus-empty"></Icon>
            添加文章
          </Button>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="handleSubmit('form')">创建</Button>
        </FormItem>
      </Form>
    </div>


    <Modal
      v-model="modal"
      width="60%"
      @on-ok="okSelectedArticle"
      title="添加文章">
      <select-article ref="selectedArticle"></select-article>
    </Modal>

  </Card>
</template>

<script>
  import selectArticle from './public/custom/SelectArticle';
  import MyUpload from '@/components/public/custom/ImgUpload.vue';

  export default {
    name: "CreateSubject",
    components: {
      selectArticle,
      MyUpload
    },
    data() {
      return {
        modal: false,
        form: {
          title: '',
          detail: '',
          imgSrc: ''
        },
        ruleValidate: {
          title: [
            {required: true, message: '请输入标题哦', trigger: 'blur'},
            {type: 'string', max: 10, message: '最多输入10个字符哦', trigger: 'change'}
          ],
          detail: [
            {required: true, message: '请输入描述哦', trigger: 'blur'},
            {type: 'string', max: 30, message: '最多输入30个字符哦', trigger: 'change'}
          ]
        },
        articleList: []  //选择的标签
      }
    },
    methods: {
      backClick() {
        this.$router.push({name: 'Subject'});
      },
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (this.form.imgSrc.length == 0) {
              this.$Message.error('请上传主图');
              return;
            }
            let ids = new Array();
            this.articleList.forEach(item => {
              ids.push(item.id);
            });
            let data = {
              title: this.form.title,
              detail: this.form.detail,
              mainimg: this.form.imgSrc,
              articlecount: this.articleList.length,
              articlelist: ids
            };
            this.axios.post(this.baseUrl+'/add-subject', JSON.stringify(data), {
              headers: {"Content-Type": "application/json"}
            }).then(res => {
              let data = res.data;
              if (data.code != 0) {
                this.$Message.success('发布成功!');
              } else {
                this.$Message.error(data.msg);
              }
            }).catch(error => {
              this.$Message.error('服务器异常: ' + error.status);
            });
          } else {
            this.$Message.error('请输入必须填写的字段');
          }
        })
      },
      okSelectedArticle() {
        this.articleList = this.$refs.selectedArticle.selectedList
      },
      removeList(index) {
        this.articleList.splice(index, 1);
      },
      uploadSuccess(url) {
        this.form.imgSrc = url;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .body
    margin: 10px
    .mainPic
      width: 300px
</style>
